import React,{Component} from "react"
import "./play.css"
import "./icon/iconfont.css"
import {getList1} from "../../api/api"
let newId
class Top extends Component{
	constructor(props){
		super(props)
		this.state={
			data:'',
			name:'',
			id:this.props.num
		}
	}
	UNSAFE_componentWillReceiveProps(nextProps){
		let {num}=nextProps
	    getList1(num)
	         .then(res =>{
	    			this.setState({
	    				data:res.data.songs[0],
						name:res.data.songs[0].ar[0].name,
	    	})
	    })
	}
	btn(){
		this.props.fh()
	}
	render(){
		return (
			<div className="top">
				<div className='topbox'>
					<i className="iconfont icon-fanhuizuojiantou" onClick={this.btn.bind(this)}></i>
					<div className='name'>
						<p>{this.state.data.name}</p>
						<em>{this.state.name} ></em>
					</div>
					<i className="iconfont icon-fenxiang"></i>
				</div>
			</div>
		)
	}
}
export default Top